<!doctype html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">

<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>登录</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" th:href="@{/assets/adminlte/css/AdminLTE.min.css}">
<!--[if lt IE 9]>
  <script src="//cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body class="hold-transition login-page">
	<div class="login-box">
		<div class="login-logo">
			<a th:href="@{/index}" th:text="#{app.name}"></a>
		</div>
		<!-- /.login-logo -->
		<div class="login-box-body">
			<p class="login-box-msg">请登录系统</p>

			<form th:action="@{/login}" method="post">
				<div class="form-group has-feedback">
					<input type="text" class="form-control" name="username" placeholder="账号" data-bv-notempty="true"
						data-bv-notempty-message="请填写账号"> <span class="glyphicon glyphicon-user form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<input type="password" class="form-control" name="password" placeholder="密码" data-bv-notempty="true"
						data-bv-notempty-message="请填写密码"> <span class="glyphicon glyphicon-lock form-control-feedback"></span>
				</div>
				<div class="form-group has-feedback">
					<div class="input-group">
						<input type="text" class="form-control" placeholder="请输入验证码" name="captcha" data-bv-notempty="true"
							data-bv-notempty-message="请填写验证码" aria-describedby="validate-code-addon"> <span class="input-group-btn"
							id="validate-code-addon"> <a href="javascript:;" id="refreshCaptchaButton"> <img
								th:src="@{/captcha.jpg}" style="height: 34px;" />
						</a>
						</span>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-8">
						<div class="checkbox icheck">
							<label> <input type="checkbox" name="remember-me"> 记住我
							</label>
						</div>
					</div>
					<!-- /.col -->
					<div class="col-xs-4">
						<button type="submit" class="btn btn-primary btn-block btn-flat">登录</button>
					</div>
					<!-- /.col -->
				</div>
			</form>

			<!-- <a href="javascript:;">忘记密码？点击此处找回</a><br> <a href="javascript:;" class="text-center">注册新用户</a> -->

		</div>
		<!-- /.login-box-body -->
	</div>
	<!-- /.login-box -->

	<script type="text/javascript" th:inline="javascript">
		var base = /*[[${#httpServletRequest.getContextPath()}]]*/"";
	</script>
	<script type="text/javascript" src="http://cdn.staticfile.org/require.js/2.3.2/require.min.js"></script>
	<script type="text/javascript">
		requirejs.config({
			paths : {
				domReady : "http://cdn.staticfile.org/require-domReady/2.0.1/domReady.min",
				jquery : "http://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min",
				bootstrap : "http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min",
				icheck : "http://cdn.staticfile.org/iCheck/1.0.2/icheck.min",
				validator : "http://cdn.staticfile.org/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min"
			},
			map : {
				"*" : {
					"css" : "http://cdn.staticfile.org/require-css/0.1.8/css.min.js"
				}
			},
			shim : {
				slimscroll : [ "jquery" ],
				bootstrap : {
					deps : [ "jquery" ],
					exports : "bootstrap"
				},
				icheck : [ "bootstrap", "css!http://cdn.staticfile.org/iCheck/1.0.2/skins/square/blue.css" ],
				validator : [ "bootstrap", "css!http://cdn.staticfile.org/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" ]
			}
		});

		requirejs([ "domReady", "jquery", "icheck", "validator" ], function(ready, $, demo) {
			ready(function() {
				$('.icheck input').iCheck({
					checkboxClass : 'icheckbox_square-blue',
					radioClass : 'iradio_square-blue',
					increaseArea : '20%' // optional
				});
				$("#refreshCaptchaButton").on("click", function() {
					$(this).children("img").attr("src", base + "/captcha.jpg?_t=" + new Date().getTime());
				});
				$("form").bootstrapValidator().on('success.form.bv', function(e) {
					e.preventDefault();
					var $form = $(e.target);
					var bv = $form.data('bootstrapValidator');
					$.post($form.attr('action'), $form.serialize(), function(result) {
						if (result.success) {
							$(".login-box-msg").nextAll(".alert").remove();
							location.href = base + "/console";
						} else {
							$(".login-box-msg").nextAll(".alert").remove();
							$(".login-box-msg").after("\
										<div class=\"alert alert-danger alert-dismissible\" role=\"alert\">\
										  <button type=\"button\" class=\"close\" data-dismiss=\"alert\" aria-label=\"Close\"><span aria-hidden=\"true\">&times;</span></button>\
										  <strong>错误提示!</strong> " + result.msg + "\
										</div>");
							$("#refreshCaptchaButton").children("img").attr("src", base + "/captcha.jpg?_t=" + new Date().getTime());
							$form.bootstrapValidator('disableSubmitButtons', false);
						}
					}, "json");
				});
			});
		});
	</script>
</body>
</html>
